<template>
	<view class="condview">
		<view class="getNumbox" @click="getNum" v-show="isShow">
			{{getTxt}}
		</view>
		<view class="num" v-show="!isShow">
			剩余 {{num}}S
		</view>
	</view>
</template>

<script>
	export default {
		name: "verification-code",
		props: {
			seconds: {
				type: Number,
				value: 60
			},
			phone:{
				type: String,
				value: '',
			},
		},
		data() {
			return {
				getTxt: '获取验证码',
				num: 60,
				isShow: true,
				phoneCheckStatus:false
			};
		},
		methods: {
			getNum: function() {
				if(this.phone=='' || !/^1[3456789]\d{9}$/.test(this.phone)){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				} 
				console.log(this.seconds)
				this.num = this.seconds
				this.isShow = false
				var interval = setInterval(() => {
					--this.num
					console.log()
				}, 1000)
				this.$emit('start')
				setTimeout(() => {
					clearInterval(interval)
					this.isShow = true
					this.getTxt = '重新获取验证码'
					this.$emit('end')
				}, this.num*1000)
			}
		}
	}
</script>

<style>
	.condview {
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #1053FF;
	}

</style>
